<template>
	<!-- <view class="uni_box login">
		<navbar title='邀请好友' backgroundColor='#010101'>
		</navbar>
		<view class="content">
			<l-painter ref="painter" useCORS :board="poster" isCanvasToTempFilePath @success="path = $event" />
			<image src="@/static/h/ng.png" mode="" class="headimg" ></image>
			<text class="tit">快去邀请好友加入吧</text>
			<view class="duibtn" @click="saveImg">
				保存二维码
			</view>
		</view>
	</view> -->
	<view class="invitation">
		<navbar title='邀请好友' backgroundColor='#010101'>
		</navbar>
		<!-- <view class="record" @click="router('/pages/my/invitationRecord')">邀请记录</view> -->
		<view class="footer content">
			<view class="copy">
				<text class="copy_title">邀请链接</text>
				<view class="copy_text">{{text}}</view>
				<view class="copy_img" @click="setClipboardData">
					<image src="@/static/my3.svg"></image>
				</view>
				<view class="save_img" @click="saveImg">
					<image src="@/static/download.svg"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<l-painter ref="painter" useCORS :board="poster" isCanvasToTempFilePath @success="path = $event" />
			<!-- <view class="contentview">
				<text class="tit">快去邀请好友加入吧</text>
				<view class="duibtn" @click="saveImg" v-if="poster">
					保存二维码
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import {
		qrCodeUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				text: "",
				poster: {}
			};
		},
		async onLoad() {
			let {
				setting
			} = await this.$u.api.setting({
				key: "default"
			});
			let size = uni.upx2px(240);
		
			let url = setting.invite_cover;
			let invitation_code = this.$store.state.info.invitation_code;
			let code = this.text = `${qrCodeUrl}?code=${invitation_code}`;
		
			uni.getSystemInfo({
				success: (res) => {
					let width = res.windowWidth,
						height = res.windowHeight;
		
					const poster = {
						css: {
							width: width + "px",
							height: height + "px"
						},
						views: [{
							type: "image",
							src: url,
							css: {
								width: width + "px",
								height: height + "px"
							},
						}, {
							type: "view",
							css: {
								width: "260rpx",
								height: "260rpx",
								padding: "10rpx",
								boxSizing: "border-box",
								background: "#fff",
								borderRadius: "12rpx",
								position: "absolute",
								right: "32rpx",
								bottom: "120rpx"
							},
							views: [{
								text: code,
								type: "qrcode",
								css: {
									width: size + "px",
									height: size + "px",
									background: "#fff"
								},
							}]
						}]
					};
					this.poster = poster;
				}
			});
		},
		methods: {
			setClipboardData() {
				uni.setClipboardData({
					data: this.text,
					success: function() {
						console.log('success');
					}
				});
			},
			saveImg() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "jpg",
					pathType: 'url',
					quality: 1,
					success: (res) => {
						//#ifdef H5
						uni.previewImage({
							urls: [res.tempFilePath]
						})
						//#endif
						//#ifdef APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								this.$u.toast("保存成功");
							}
						});
						//#endif
					},
				});
			},
			router(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #010101;
  }
  .content{
	  .contentview{
		  padding: 30rpx;
	  }
	  // padding: 30rpx;
	  .headimg{
		  margin: 100rpx auto;
		  width: 320rpx;
		  height: 320rpx;
		  border-radius: 10rpx;
		  display: block;
	  }
	  .tit{
		  font-size: 48rpx;
		  font-family: PingFang SC-Regular, PingFang SC;
		  font-weight: 400;
		  color: #73FAB5;
		  margin-top: 48rpx;
		  display: block;
		  text-align: center;
	  }
	  .duibtn{
	  		  width: 100%;
	  		  height: 88rpx;
	  		  background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
	  		  border-radius: 8rpx;
	  		  opacity: 1;
	  		  display: flex;
	  		  align-items: center;
	  		  justify-content: center;
	  		  font-size: 32rpx;
	  		  font-family: PingFang SC-Bold, PingFang SC;
	  		  font-weight: bold;
	  		  color: #232323;
	  		  margin-top: 70rpx;
	  }
  }
  .invitation {
  	width: 100vw;
  	min-height: 100%;
  	// background: url('@/static/a_1.svg') no-repeat;
  	background-size: 100% 100%;
  	position: relative;
  
  	.record {
  		color: #000000;
  		font-size: 28rpx;
  		border-radius: 10rpx;
  		padding: 10rpx 20rpx;
  		background-color: #F0FBF3;
  		
  		position: absolute;
  		right: 32rpx;
  		top: 40rpx;
  		z-index: 2;
  	}
  
  	.qrcode {
  		width: 260rpx;
  		height: 260rpx;
  		padding: 10rpx;
  		box-sizing: border-box;
  		background: #31D3D7;
  		border-radius: 12rpx;
  		position: absolute;
  		right: 32rpx;
  		bottom: 100rpx;
  		// left: 50%;
  		// top: 50%;
  		// transform: translate(-50%, -50%);
  	}
  
  	.footer {
  		width: 100%;
  		padding: 0 16rpx;
  		box-sizing: border-box;
  		display: flex;
  		justify-content: center;
  		position: absolute;
  		left: 0rpx;
  		bottom: 20rpx;
  		z-index: 2;
  
  		.copy {
  			width: 100%;
  			height: 80rpx;
  			line-height: 80rpx;
  			border-radius: 8rpx;
  			padding: 0 16rpx;
  			box-sizing: border-box;
  			background: #EEEEEE;
  			display: flex;
  			justify-content: space-between;
  			align-items: center;
  
  			.copy_title {
  				color: #000000;
  				font-size: 28rpx;
  				font-weight: 500;
  				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  			}
  
  			.copy_text {
  				flex: 1;
  				width: 0;
  				padding: 0 32rpx;
  				box-sizing: border-box;
  				font-size: 28rpx;
  				color: #AAAAAA;
  				font-weight: 400;
  				white-space: nowrap;
  				text-overflow: ellipsis;
  				overflow: hidden;
  			}
  
  			.copy_img,
  			.save_img {
  				width: 48rpx;
  				height: 48rpx;
  				margin-left: 10rpx;
  
  				image {
  					width: 100%;
  					height: 100%;
  				}
  			}
  		}
  	}
  
  	.save {
  		width: 480rpx;
  		height: 80rpx;
  		line-height: 80rpx;
  		text-align: center;
  		color: #00CACE;
  		font-size: 28rpx;
  		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  		font-weight: 500;
  		border-radius: 8rpx;
  		border: 1px solid #00CACE;
  		padding: 0 16rpx;
  		box-sizing: border-box;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  
  		.save_img {
  			width: 32rpx;
  			height: 32rpx;
  			margin-left: 10rpx;
  		}
  	}
  }
</style>
